extends ./../layout

block title

	meta(name="description" content="最近更多了超多的免费课程，包括项目实战和基础视频，你还在等什么能？")
	meta(name="keywords" content="go，html，css，后端，vue，php，java，node，koa, 在线技术学习")
	link(rel="stylesheet" href="/css/home/play.css" )
	link(rel="stylesheet" href="http://cdn.bootcss.com/video.js/7.6.0/video-js.min.css" )
	script(src="http://cdn.bootcss.com/video.js/7.6.0/video.min.js")

block content
	.play(class="pages" data-module="play")
		.container
			.video-title
				h2
					a(uk-icon="icon: file-edit; ratio: 1.4")
					| #{courseList.courseTitle}
			.video-main
				//- #player.playvideo
				video(id="courseVideo" class="playvideo video-js vjs-styles-dimensions")
					source(src=`${PlayingVideo.courseVideoUrl}` type="application/x-mpegURL")
					//- source(src="http://ptrl9u2l4.bkt.clouddn.com/demos?attname=&e=1561662627&token=0MGmT_rkMiaOeXY09B4EhBnXuDcIYyKlGumQ-zUt:9Dd_CPc5gsH3K2wOO2y7T8_kSmU" type="application/x-mpegURL")
				.video-list
					span(class="currentId" style="display: none") #{PlayingVideo.objectId}
					ul
						each item in courseVideoList
							li
								p(id=`${item.objectId}`)
									a(class="p-i" uk-icon="video-camera")
									a(class="p-m" href=`/coures/play/${courseList.objectId}\/${item.objectId}`) #{item.courseTitle}

			.video-other
				ul(class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium")
					li
						a(href='#') 本课时课件
					li
						a(href='#') QQ群咨询
				ul.uk-switcher.uk-margin
					li
						| 本课有课程代码，可点击下载代码后对照视频和代码进行相关的学习！
						a(class="uk-label uk-label-success" href="") 点击下载
					li
						| 视频学习过程中遇到任何问题都可加群咨询！
						a(target='_blank', href='//shang.qq.com/wpa/qunwpa?idkey=a0ac9d5b1358c33006958630dc3ca5629b1914969ff62c7656a49e0e2cd239f6')
							img(border='0', src='//pub.idqqimg.com/wpa/images/group.png', alt='创想工作室', title='创想工作室')

		script.
			(videojs('courseVideo', {
				autoplay: false,
				controls: true,
				playbackRates: [0.5, 1, 1.5, 2]
			})).play()
